<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background: rgb(0, 0, 0);
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
			//得到所有的元素
				var myred_sub = document.getElementById("red_sub");
				var myred_add = document.getElementById("red_add");
				var myred_result = document.getElementById("red_result");
				
				var mygreen_sub = document.getElementById("green_sub");
				var mygreen_add = document.getElementById("green_add");
				var mygreen_result = document.getElementById("green_result");
				
				var myblue_sub = document.getElementById("blue_sub");
				var myblue_add = document.getElementById("blue_add");
				var myblue_result = document.getElementById("blue_result");
				
				//得到大盒子
                var mybox = document.getElementById("box");
                
            //要定义三个全局变量,分别为 Red green blue
				var red = 0;
				var green = 0;
				var blue = 0;
				
			//添加事件监听
				//red
				myred_sub.onclick=function(){
					if(red>=5){
						//改变全局变量的值 ,再把新值赋回自己
						red=red-5;
						//1改变旁边 span的内部内容
						myred_result.innerHTML=red;
						//2改变改变大盒子的red值
						mybox.style.background="rgb(" + red + "," + green + "," + blue + ")";
					}
				}
				myred_add.onclick=function(){
					if(red<=250){
						red=red+5;
						myred_result.innerHTML=red;
						mybox.style.background="rgb(" + red + "," + green + "," + blue + ")";
					}
				}
				
				//green
				mygreen_sub.onclick=function(){
					if(green>=5){
						green=green-5;
						mygreen_result.innerHTML=green;
						mybox.style.background="rgb(" + red + "," + green + "," + blue + ")";
					}
				}
				
				mygreen_add.onclick=function(){
					if(green<=250){
						green=green+5;
						mygreen_result.innerHTML=green;
						mybox.style.background="rgb(" + red + "," + green + "," + blue + ")";
					}
				}
				
				//blue
				myblue_sub.onclick=function(){
					if(blue>=5){
						blue=blue-5;
						myblue_result.innerHTML=blue;
						mybox.style.background="rgb(" + red + "," + green + "," + blue + ")";
					}
				}
				
				myblue_add.onclick=function(){
					if(blue<=250){
						blue=blue+5;
						myblue_result.innerHTML=blue;
						mybox.style.background="rgb(" + red + "," + green + "," + blue + ")";
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
		<p>
			<span>R</span>
			<input type="button" value="-" id="red_sub" />
			<input type="button" value="+" id="red_add" />
			<span id="red_result">0</span>
		</p>
		<p>
			<span>G</span>
			<input type="button" value="-" id="green_sub" />
			<input type="button" value="+" id="green_add" />
			<span id="green_result">0</span>
		</p>
		<p>
			<span>B</span>
			<input type="button" value="-" id="blue_sub" />
			<input type="button" value="+" id="blue_add" />
			<span id="blue_result">0</span>
		</p>
	</body>
</html>
